<template>
    <view>
        <div class="container">

            <a @click="selectAll('1')" style="margin-right: 20rpx" href="javascript:">全选</a>
            <a @click="selectAll('0')" href="javascript:">取消全选</a>
            <view class="box" v-for="(item, i) in products" :key="i">
                <view>{{ item.pname }}</view>
                <view>价格：{{ item.tprice }}元</view>
                <view class="contro">

                    <checkbox @click="checkboxChange(i)" :checked="item.checked === '1' ? true : false" :value="item.checked">
                    </checkbox>
                    <view @click="reduce(item, i)">-</view>
                    <input disabled="true" type="number" @input="changeHandle(item, i)" v-model="item.pnum">
                    <view @click="add(item, i)">+</view>

                </view>
                <button @click="remove(i)">删除</button>
            </view>
        </div>
        <view class="fix">
            <view>合计：<text class="price">{{ selectedProduct }}</text></view>
            <view class="pay">结算</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            products: []
        }
    },
    onShow() {
        //获取本地存储的购物车信息
        console.log(this)
        //this指向 前端this指向问题 经典面试题
        let _this = this
        uni.getStorage({
            key: "cart",
            success(res) {
                console.log(res.data)
                console.log(this)
                _this.products = res.data
            }
        })

    },
    methods: {
        add(value, index) {
            if (value.pnum >= 100) {
                value.pnum = 100
            } else {
                value.pnum = ++value.pnum
            }
            this.$set(this.products, index, value)
            //将数据进行本地存储更新
            this.setProduct()
        },
        remove(i) {
            this.products.splice(i, 1)
            console.log(this.products)

            //将数据进行本地存储更新
            this.setProduct()
        },
        reduce(value, index) {
            if (value.pnum <= 1) {
                value.pnum = 1
            } else {
                value.pnum = --value.pnum
            }
            this.$set(this.products, index, value)
            //将数据进行本地存储更新
            this.setProduct()
        },
        changeHandle(item, index) {
            if (item.pnum >= 100) {
                item.pnum = 100
            } else if (item.pnum <= 1) {
                item.pnum = 1
            }
            let value = this.products[index]
            value.pnum = item.pnum
            this.$set(this.products, index, value)
            console.log(item)
        },

        //修改选择状态
        checkboxChange(i) {
            //获取当前选择的商品数据
            let item = this.products[i]
            // 对商品选中状态进行切换
            item.checked = item.checked === "1" ? "0" : "1"
            //强制更新data中的数据
            //
            this.$set(this.products, i, item)
            //将数据进行本地存储更新
            this.setProduct()
        },
        selectAll(val) {
            this.products.forEach((item, i) => {
                this.products[i].checked = val
            })
            //将数据进行本地存储更新
            this.setProduct()
        },
        setProduct() {
            //需求 将当前商品信息重新存储到本地存储中
            console.log(this.products)
            uni.setStorage({
                key: "Cart",
                data: this.products
            })
        }

    },
    //计算属性
    computed: {
        selectedProduct: function () {
            //筛选出选中商品数据列表
            let money = this.products.filter(product => product.checked === "1")
                //实现商品金额累加
                .reduce((accumulator, product) => accumulator + product.tprice * product.pnum, 0);
            return money
        }
    },
}
</script>

<style>
.box {
    margin: 15rpx;
    padding: 15rpx;
    box-shadow: 0 0 10rpx #ccc;
}

input {
    border: 1px solid #000;
}

.contro {
    display: flex;
    justify-content: space-around;
}

.box>view {
    margin: 20rpx;
}

button {
    width: 150rpx;
}

.container {
    margin-bottom: 80px;
}

.fix {
    position: fixed;
    left: 0;
    bottom: 50px;
    height: 50px;
    /* background: #000; */
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10rpx;
}

.price {
    color: orange;
    font-weight: bold;
}

.pay {
    background: orange;
    border-radius: 50%;
    width: 100rpx;
    height: 100%;
    line-height: 50px;
    text-align: center;

}
</style>
